<script setup>
import { showDialog, showConfirmDialog } from 'vant'
import { defineProps, reactive, ref, toRefs } from 'vue'

const props = defineProps({
  page: {
    type: String,
    required: true
  },
  msg: {
    type: String,
    required: true
  },
  imgwidth: {
    type: String
  },
  imgheight: {
    type: String
  },
  position: {
    type: String
  },
  waterLogo: {
    type: String
  }
})

const { page, msg, imgwidth, imgheight, waterLogo, position } = toRefs(props)

let dostatus = ref(0)
let selectDirectory = ref('')
let outputDirectory = ref('')
let filesAry = reactive([])
const outputName = 'outputool'

function getMsg() {
  let _type = ''
  let _msg = ''
  if (page.value === 'waterMark') {
    if (waterLogo.value) {
      _type = 'logo'
      _msg = waterLogo.value
    } else {
      _type = 'font'
      _msg = msg.value
    }
  }
  return {
    _type,
    _msg
  }
}

function updateStatus(v) {
  dostatus.value = v
}

function fileSelect() {
  const select = window.service.openDirectory()
  if (select && Array.isArray(select)) {
    selectDirectory.value = select[0]
    filesAry = reactive([])
    filesAry.push(...window.service.getFilesDirectory(selectDirectory.value))
  }
}

function doAction() {
  if (page.value === 'convertFormat') {
    changeExtension()
  } else if (page.value === 'modifySize') {
    if (imgwidth.value > 1 || imgwidth.value > 1) {
      modifyImg()
    } else {
      showDialog({
        title: '温馨提示',
        message: '请输入正确的图片宽度或者高度！'
      })
    }
  } else if (page.value === 'waterMark') {
    if (waterLogo.value) {
      waterMark()
    } else {
      showDialog({
        title: '温馨提示',
        message: '请选择水印图案！'
      })
    }
  }
}

function shellInFolder() {
  window.service.shellShowItemInFolder(outputDirectory.value)
  selectDirectory.value = ''
  outputDirectory.value = ''
  filesAry = reactive([])
}

function doActionNext() {
  selectDirectory.value = ''
  outputDirectory.value = ''
  filesAry = reactive([])
  fileSelect()
}

function waterMark() {
  const inputDirectory = selectDirectory.value
  outputDirectory.value = selectDirectory.value + '/' + outputName + '/'
  let { _type, _msg } = getMsg()
  window.service.waterMarkImages(
    inputDirectory,
    outputDirectory.value,
    _msg,
    () => {
      updateStatus(0)
      showConfirmDialog({
        title: '温馨提示',
        message: '图片已经处理完成，请到点击查看结果或继续处理其它文件夹图片。',
        confirmButtonText: '查看结果',
        cancelButtonText: '继续处理'
      })
        .then(() => {
          shellInFolder()
        })
        .catch(() => {
          doActionNext()
        })
    },
    _type,
    position.value
  )
}

function modifyImg() {
  const imageExtension = msg.value
  const inputDirectory = selectDirectory.value
  outputDirectory.value = selectDirectory.value + '/' + outputName + '/'
  const imageSize = {
    width: imgwidth.value ? parseFloat(imgwidth.value) : null,
    height: imgheight.value ? parseFloat(imgheight.value) : null
  }
  window.service.modifyImages(
    inputDirectory,
    outputDirectory.value,
    imageSize,
    imageExtension,
    () => {
      updateStatus(0)
      showConfirmDialog({
        title: '温馨提示',
        message: '图片已经处理完成，请到点击查看结果或继续处理其它文件夹图片。',
        confirmButtonText: '查看结果',
        cancelButtonText: '继续处理'
      })
        .then(() => {
          shellInFolder()
        })
        .catch(() => {
          doActionNext()
        })
    }
  )
}

function changeExtension() {
  const imageExtension = msg.value
  const inputDirectory = selectDirectory.value
  outputDirectory.value = selectDirectory.value + '/' + outputName + '/'
  window.service.changeImageExtension(inputDirectory, outputDirectory.value, imageExtension, () => {
    updateStatus(0)
    showConfirmDialog({
      title: '温馨提示',
      message: '图片已经处理完成，请到点击查看结果或继续处理其它文件夹图片。',
      confirmButtonText: '查看结果',
      cancelButtonText: '继续处理'
    })
      .then(() => {
        shellInFolder()
      })
      .catch(() => {
        doActionNext()
      })
  })
}
</script>

<template>
  <div class="file-wrapper flex-box flex-column">
    <div class="file-select flex1">
      <div class="select-action" v-if="filesAry.length < 1">
        <van-button icon="plus" type="primary" size="small" @click="fileSelect"
          >选择图片文件夹
        </van-button>
      </div>
      <div v-else>
        <ul>
          <li
            v-for="file in filesAry"
            :key="file"
            class="flex-box flex-acenter flex-jcenter item-file"
          >
            <i class="ico iconfontygl icon-charutupian"></i>
            <div class="flex1 file-info">
              <p class="file-name">{{ file }}</p>
              <!--            <p class="file-resolution">{{ file.resolution }}</p>-->
            </div>
            <!--          <span class="file-size">{{ file.size }}</span>-->
          </li>
        </ul>
      </div>
    </div>
    <div class="file-action flex-box flex-acenter">
      <span class="file-add" @click="fileSelect"
        ><i class="ico iconfontygl icon-24gf-folderOpen"></i
      ></span>
      <!--      <span :class="{-->
      <!--      'btn btn-default  action': true,-->
      <!--      'btn_disabled': !selectDirectory-->
      <!--      }"-->
      <!--      @click="doAction">开始处理</span>-->

      <van-button
        v-if="dostatus === 0"
        :disabled="!selectDirectory"
        icon="share-o"
        type="primary"
        @click="doAction"
        >开始处理
      </van-button>
      <van-button v-else loading type="primary" loading-text="处理中..." />
    </div>
  </div>
</template>

<style scoped>
.file-wrapper {
  height: 100%;
}

.file-select {
  overflow: scroll;
}

.file-select .select-action {
  padding: 40px 0 0;
  text-align: center;
}

.file-select ul {
  padding: 8px 0;
}

.item-file {
  padding: 5px 10px;
}

.item-file .ico {
  font-size: 28px;
  line-height: 1;
}

.item-file .file-info {
  padding: 0 0 0 5px;
}

.item-file .file-info .file-name {
  font-size: 14px;
  line-height: 1;
  padding: 0 0 2px;
}

.item-file .file-resolution {
  color: #999;
  font-size: 12px;
  line-height: 1;
}

.item-file .file-size {
  text-align: center;
  width: 100px;
}

.file-action {
  border-top: 1px solid #ddd;
  background-color: #f5f5f5;
  padding: 10px 10px;
  justify-content: space-between;
}

.file-action .file-add {
  cursor: pointer;
}

.file-action .file-add .ico {
  font-size: 20px;
}

.file-action .action {
  cursor: pointer;
}
</style>
